<template>
  <div class="dueToday">
    <h3>到期提醒</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'姓名'">
        <el-input v-model.trim="searchInfo.realName" placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'待还款金额'">
        <el-input class="inputWidth" v-model.trim="searchInfo.paidAmountStart" placeholder="起始金额"></el-input>-
        <el-input class="inputWidth" v-model.trim="searchInfo.paidAmountEnd" placeholder="结束金额"></el-input>
      </SearchWarp>
      <SearchWarp :label="'本人是否接通'">
        <el-select v-model="searchInfo.isCall" placeholder="请选择">
          <el-option
            v-for="item in isCallOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </SearchWarp>
      <SearchWarp :label="'联系人数'">
        <el-input class="inputWidth" v-model.trim="searchInfo.callNumStart" placeholder="起始人数"></el-input>-
        <el-input class="inputWidth" v-model.trim="searchInfo.callNumEnd" placeholder="结束人数"></el-input>
      </SearchWarp>
      <SearchWarp :label="'愿意转告人数'">
        <el-input class="inputWidth" v-model.trim="searchInfo.tellNumStart" placeholder="起始人数"></el-input>-
        <el-input class="inputWidth" v-model.trim="searchInfo.tellNumEnd" placeholder="结束人数"></el-input>
      </SearchWarp>
      <SearchWarp :label="'提醒人'">
        <el-select v-model="searchInfo.remindName" placeholder="请选择">
          <el-option
            v-for="item in remindPeopleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'订单列表'"></AreaTitleWarp>
    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column v-if="warnShow" prop="userId" label="提醒">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dblclick(scope.row)">提醒</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="borrowId" label="订单ID"></el-table-column>
        <el-table-column prop="realName" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="100"></el-table-column>
        <el-table-column prop="paidAmount" label="待还款金额" min-width="120"></el-table-column>
        <el-table-column prop="isCall" label="本人是否接通" :formatter="formatter_iscall"></el-table-column>
        <el-table-column
          prop="repayWish"
          label="本人还款意愿"
          :formatter="formatter_repayWish"
        ></el-table-column>
        <el-table-column prop="callNum" label="联系人数"></el-table-column>
        <el-table-column prop="wishCallNum" label="愿转告人数"></el-table-column>
        <el-table-column
          prop="lastRemindTime"
          label="最近提醒时间"
          min-width="150"
          :formatter="formatter_timeYMDHM"
        ></el-table-column>
        <el-table-column prop="remindName" label="提醒人"></el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import Warn from "../../../assets/js/warn.js";
export default {
  data() {
    return {
      searchInfo: {
        realName: "",
        mobile: "",
        paidAmountStart: "",
        paidAmountEnd: "",
        isCall: -1,
        callNumStart: "",
        callNumEnd: "",
        tellNumStart: "",
        tellNumEnd: "",
        remindName: "全部",
        size: 20,
        page: 1
      },
      warnShow: false,
      isCallOptions: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 1,
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ],
      remindPeopleOptions: [
        {
          value: -1,
          label: "全部"
        }
      ],
      loading: false,
      tableInfo: {
        list: [],
        total: 0
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //提醒人
    remindId() {
      let that = this;
      let login_user = that.localData("get", "login_user");
      let role = login_user.role;
      let companyId = login_user.companyId;
      return new Promise(function(resolve, reject) {
        that.ajaxJson({
          url: "/static/order/custom/customUsers",
          data: {
            role: role,
            companyId: companyId
          },
          success: function(res) {
            if (res.code == "0") {
              let data = res.data;
              data.forEach(function(item) {
                that.remindPeopleOptions.push({
                  value: item.id,
                  label: item.realName
                });
              });
              resolve();
            }
          }
        });
      });
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        realName: that.searchInfo.realName,
        mobile: that.searchInfo.mobile,
        paidAmountStart: that.searchInfo.paidAmountStart,
        paidAmountEnd: that.searchInfo.paidAmountEnd,
        isCall: that.searchInfo.isCall,
        callNumStart: that.searchInfo.callNumStart,
        callNumEnd: that.searchInfo.callNumEnd,
        tellNumStart: that.searchInfo.tellNumStart,
        tellNumEnd: that.searchInfo.tellNumEnd,
        remindName: that.searchInfo.remindName,
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };
      let warn = new Warn(x);
      let reqData = warn.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.loading = true;
      that.ajaxJson({
        url: "/order/custom/list",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    reset() {
      let that = this;
      that.searchInfo = {
        realName: "",
        mobile: "",
        paidAmountStart: "",
        paidAmountEnd: "",
        isCall: -1,
        callNumStart: "",
        callNumEnd: "",
        tellNumStart: "",
        tellNumEnd: "",
        remindName: "全部",
        size: 20,
        page: 1
      };
      that.tableInfo = {
        list: [],
        total: 0
      };
      that.search();
    },
    //提醒
    dblclick(row) {
      let that = this;
      that.$emit("addTab", {
        tabOptions:
          "dueMessage_" + row.realName + "_" + row.borrowId + "_案件详情",
        queryMsg: {
          method: "add",
          borrowId: row.borrowId,
          userId: row.userId,
          realName: row.realName,
          remindName: row.remindName
        }
      });
    },
    isWarnShow() {
      let that = this;
      let isWarnShow = that
        .urlPermissions()
        .indexOf("/order/custom/remindList");
      if (isWarnShow == "-1") {
        that.warnShow = false;
      } else {
        that.warnShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.remindId(), that.isWarnShow()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.dueToday {
  .inputWidth {
    width: 120px;
  }
}
</style>
